<template>
	<div class="read_tape">
		<div class="read_nav">
			<div class="back_btn" @click="back()"></div>
			<p>{{header_name}}</p>
		</div>
		<div class="tape_content">
			<div class="tape_tit">
				作品名称：<span>{{title}}</span>
			</div>
			<div class="tape_btn" @click="playaudio()">
				<div :class="playbtn"></div>
			</div>
			<div class="tape_share">
				<div class="next_tape" @click="reRecord()">重新录制</div>
				<div class="share_btn" @click="share()">立刻分享</div>
			</div>
			<div class="water"></div>
		</div>
		<audio ref="audio" :src="audio_url" @ended="playend"></audio>
	</div>
</template>
<script type="text/ecmascript-6">
	export default {
		data() {
			return {
				playbtn: 'btn_icon',
				title: '',
				audio_url: '',
				chid: '',
				header_name: "范文朗读",
				record_flag: true
			}
		},
		created() {
			var readtitle = localStorage.getItem('readTitle');
			//readtitle:0 自定义朗读 1 范文朗读
			readtitle = readtitle == 1 ? '范文朗读' : '自定义朗读';
			this.header_name = readtitle;
			this.$store.commit('hidefooter');
			let title = decodeURI(this.$route.query.title);
			let url = this.$route.query.url;
			let chid = this.$route.query.chid;
			this.title = title;
			this.audio_url = media_ads + url.replace('/UploadFileS', '');
			this.chid = chid;
			localStorage.setItem('isrepeat', true);
		},
		methods: {
			back() {
				this.$router.go(-1);
			},
			playaudio() {
				if(this.playbtn == "btn_icon") {
					this.playbtn = "btn_pause";
					this.$nextTick(() => {
						this.$refs.audio.play();
					});
				} else {
					this.playbtn = "btn_icon";
					this.$nextTick(() => {
						this.$refs.audio.pause();
					});
				}
			},
			reRecord() {
				if(this.record_flag) {
					this.$router.go(-1);
				}
			},
			share() {
				this.record_flag = false;
				let url = this.audio_url;
				let _title = encodeURI(this.title);
				let chid = this.chid;
				var stu_id = this.$store.state.stu_id;
				var openDate = this.$store.state.opendate;
				var _url = actWeb + '/share?title=' + _title + '&url=' + url + '&chid=' + chid + '&stu_id=' + stu_id + '&openDate=' + openDate;
				var title = _title;
				try {
					appobject.Interactive("ys_share," + _url + "|" + title);
				} catch(e) {
					layer.tips('PC端不支持此功能');
					return;
				}
				this.$http.post(domain + '/API/SummerAct/StuSaveRecord', {
					'type': 1,
					//'IsRepeat': repeat,
					'stuID': this.$store.state.stu_id,
					'stuName': this.$store.state.stu_name,
					'classID': this.$store.state.class_id,
					'schoolID': this.$store.state.school_id,
					'schoolName': this.$store.state.school_name,
					'txtCode': this.chid, //课程编码
					'textName': this.title, //课程名称
					'audioUrl': url, //录音地址
					'openDate': this.$store.state.opendate,
					'sendTime': new Date().Format('yyyy-MM-dd hh:mm:ss'),
					'intcityID': this.$store.state.city_id
				}).then((res) => {
					layer.tips('分享成功!');
				});
			},
			playend() {
				this.$refs.audio.pause();
				this.playbtn = "btn_icon";
			}
		}
	}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../../assets/scss/common";
	.read_tape {
		background-color: #f9ead4;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;
		.read_nav {
			width: 720px/$ppr;
			height: 96px/$ppr;
			background-color: #56af00;
			margin-bottom: 82px/$ppr;
			.back_btn {
				width: 64px/$ppr;
				height: 64px/$ppr;
				background-image: url(./img/back2.png);
				background-size: 100% 100%;
				position: absolute;
				left: 24px/$ppr;
				top: 16px/$ppr;
			}
			p {
				text-align: center;
				line-height: 96px/$ppr;
				font-size: 36px/$ppr;
				color: #FFFFFF;
			}
		}
		.tape_content {
			padding-top: 100px/$ppr;
			text-align: center;
			.tape_tit {
				color: #f5a315;
				font-size: 30px/$ppr;
				line-height: 60px/$ppr;
			}
			.tape_btn {
				width: 179px/$ppr;
				height: 179px/$ppr;
				background-color: #FFFFFF;
				margin: 0 auto;
				border-radius: 90px/$ppr;
				margin-top: 50px/$ppr;
				border: 1px solid #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				.btn_icon {
					width: 74px/$ppr;
					height: 84px/$ppr;
					background-image: url(./img/vioue.png);
					background-size: 100% 100%;
				}
				.btn_pause {
					width: 74px/$ppr;
					height: 84px/$ppr;
					background-image: url(./img/pause.png);
					background-size: 100% 100%;
				}
			}
			.tape_share {
				margin-top: 60px/$ppr;
				color: #FFFFFF;
				font-size: 30px/$ppr;
				.next_tape {
					float: left;
					width: 196px/$ppr;
					height: 80px/$ppr;
					background-color: #ff6600;
					border-radius: 40px/$ppr;
					line-height: 80px/$ppr;
					text-align: center;
					margin-left: 128px/$ppr;
				}
				.share_btn {
					float: right;
					width: 196px/$ppr;
					height: 80px/$ppr;
					background-color: #56af00;
					border-radius: 40px/$ppr;
					line-height: 80px/$ppr;
					margin-right: 128px/$ppr;
				}
			}
		}
		.water {
			clear: both;
			position: fixed;
			bottom: 0px;
			width: 720px/$ppr;
			height: 216px/$ppr;
			background-image: url(./img/water.png);
			background-size: 100% 100%;
		}
	}
</style>